<template>
  <el-dialog title="更新模型" :visible.sync="dialogVisible" width="35%" :before-close="handleClose" :close-on-click-modal="false">
    <div class="j-new-model-body">
      <el-form ref="form" label-position="right" label-width="80px" size="small">
        <el-form-item label="模型名称">
          <el-input v-model="model.title" placeholder="请输入标题"></el-input>
        </el-form-item>
        <el-form-item label="唯一标识">
          <el-input v-model="model.name" placeholder="请输入名称" :disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="新增字段" v-if="fields.length !== 0">
          <el-row style="margin-bottom: 5px" v-for="(item,index) in fields" :key="index">
            <el-col :span="7" style="padding-right: 5px;">
              <el-input v-model="item.title" placeholder="输入字段名称"></el-input>
            </el-col>
            <el-col :span="7" style="padding-right: 5px;">
              <el-input v-model="item.field" placeholder="输入字段标识"></el-input>
            </el-col>
            <el-col :span="7" style="padding-right: 5px;">
              <el-select v-model="item.type" placeholder="选择字段类型">
                <el-option label="字符串" value="String"></el-option>
                <el-option label="数字" value="Number"></el-option>
                <el-option label="日期" value="Date"></el-option>
                <el-option label="二进制" value="Buffer"></el-option>
                <el-option label="布尔值" value="Boolean"></el-option>
                <el-option label="数组" value="Array"></el-option>
              </el-select>
            </el-col>
            <el-col :span="3" style="text-align: center;">
              <el-button type="danger" @click="handleDelete(index)" icon="el-icon-delete" circle></el-button>
            </el-col>
          </el-row>
        </el-form-item>
        <el-form-item label=" ">
          <el-button icon="el-icon-plus" @click="handleAdd">增加一个字段</el-button>
        </el-form-item>
      </el-form>
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button @click="dialogVisible = false" size="small">取 消</el-button>
      <el-button type="primary" size="small" @click="handleAffirm">更 新</el-button>
    </span>
  </el-dialog>
</template>
<script type="text/javascript">


import { mapState,mapActions } from 'vuecx'
function copy_data(value) {
  return JSON.parse(JSON.stringify(value));
}


export default {
  props: {
    value: [Array, Object, Number, String]
  },
  data() {
    return {
      fields: [],
      dialogVisible: false,
      model: {
        title: '',
        name: '',
        fields: [],
      }
    };
  },
  /**
   * 计算属性
   * @type {Object}
   */
  computed: {
    ...mapState(['resources'])
    // models:function(argument){
    //   return this.value.models
    // }
  },
  /**
   * 数据监听
   * @type {Object}
   */
  watch: {

  },
  /**
   * 页面加载执行
   * @return {[type]} [description]
   */
  mounted() {
    console.log('model',this.value)
    this.model = this.value;
    this.fields = this.value.fields
  },
  methods: {
    ...mapActions(['setResourcesAttr']),
    /**
     * 关闭弹窗
     * @return {[type]} [description]
     */
    handleClose() {
      this.dialogVisible = false;
    },
    /**
     * 删除字段
     * @return {[type]} [description]
     */
    handleDelete(index) {
      this.fields.splice(index, 1);
    },
    /**
     * 新增一个字段
     * @return {[type]} [description]
     */
    handleAdd() {
      this.fields.push({
        name: "",
        title: "",
        field: "",
        type: "String"
      })
    },
    /**
     * 添加图层
     * @return {[type]} [description]
     */
    handleAffirm() {
      let basic = {
        title: "字段标题",
        field: "",
        type: "String",
        required: false,
        default: "",
        index: false, //设定索引值nom 
        unique: false, //索引值唯一
        sparse: false, //是否启用稀疏索引
        capped: 1, //限制长度
        min: 0,
        max: 0,
        format: {
          is_format: false, //是否格式化
          value: "" //格式化类型
        },
        validate: {
          is_validate: false,
          custom: false,
          value: "",
          regular: ""
        },
        degree: 1
      }

      let data = [];
      //循环设置
      for (let i in this.fields) {
        if(Object.keys(this.fields[i]).length == 4){
          let _base = copy_data(basic);
          let item = copy_data(this.fields[i]);
          data.push(Object.assign(_base, item))
        }else{
          data.push(this.fields[i]);
        }
      }

      this.model.fields = data;
      this.$cloud.post("build/create", {
        action: "update",
        data: this.model
      }).then(response => {
        this.resources.models.forEach(item => {
          if(item.value === this.model.name){
            item.label = this.model.title+"("+item.value+")";
          }
        })
        this.$message.success('更新成功！');
        this.select = [];
        this.fields = [];
        this.dialogVisible = false;
        this.model = {
          title: '',
          name: '',
          fields: []
        }
      }).catch(error => {
        console.log(error);
      });
    },
  }
}

</script>
<style type="text/css" lang="scss">
</style>
